<template>
  <div class="marker-container" :style="{ backgroundImage: 'url(' + url + ')' }">
    <div class="config-btn">
      <a-button type="primary" @click="onPartMark()">
        局部水印
      </a-button>
      <a-button type="primary" @click="onGlobalMark()">
        全局水印
      </a-button>
      <a-button type="primary" @click="onRandomColor">
        随机生成颜色水印
      </a-button>
      <a-input v-model:value="globalAlpha" style="width: 200px" />
      <a-button type="primary" @click="onSetGlobalAlpha">
        设置透明度
      </a-button>
      <a-button type="primary" @click="onCancelmark">
        取消水印
      </a-button>
    </div>
  </div>
</template>
<script lang='ts' setup>
import * as util from '@/util/util.js';
import { reactive, ref } from 'vue';
const url = ref('');
const isPart = ref(true);
const option = reactive({
  fillStyle: '#000',
  globalAlpha: 0.3,
})
const globalAlpha = ref(0.3);
const onPartMark = () => {
  isPart.value = true;
  url.value = util.watermark(option, false) || '';
}
const onGlobalMark = () => {
  isPart.value = false;
  util.watermark(option, true);
  url.value = '';
}
const onRandomColor = () => {
  let color = '#' + Math.random().toString(16).substr(2, 6);
  option.fillStyle = color;
  if (isPart) {
    onPartMark();
    return;
  }
  onGlobalMark();
}
const onSetGlobalAlpha = () => {
  const num = Number(globalAlpha.value);
  option.globalAlpha = num || 0.3;

  if (isPart) {
    onPartMark();
    return;
  }
  onGlobalMark();
}
const onCancelmark = () => {
  util.watermark(option, false);
  url.value = '';
}
</script>
<style lang='less' rel='stylesheet/less' scoped>
.marker-container {
  width: 100%;
  height: 100%;
  padding: 20px;

  .config-btn {
    :deep(.ant-btn) {
      margin: 10px;
    }
  }
}
</style>